<template>
    <div>
        <div class="flex gap-16px">
            <insureData class="flex-1" title="保险数据" type="fullEnd" :list="Object.values(list)" :company-id="companyId"
                show-company show-type show-plan v-model:date-value="dateList"
                v-model:select-insure-company-value="selectInsureCompanyValue" v-model:select-type-value="selectTypeValue"
                v-model:select-plan-value="selectPlanValue" @change="getInsureData" insure-type="long"/>
            <otherData class="flex-1" v-model:select-value="selectCompanyValue" :company-id="companyId" insure-type="long"/>
        </div>
        <div class="flex gap-16px">
            <chartInsureType :company-id="companyId" class="mg-t-16 flex-1 h-300 w-full" insure-type="long"/>
            <trendData :company-id="companyId" class="mg-t-16 flex-1 h-300 w-full" insure-type="long"/>
        </div>
    </div>
</template>
<script setup>
import { ref, watch } from 'vue'
import insureData from '../insureData.vue'
import chartInsureType from '../chartInsureType.vue'
import otherData from '../otherData.vue'
import trendData from '../trendData.vue'

import { getPeriodPremiumCount } from '@/api/clients/signClient.ts'
import { getInsuranceCompany, getPeriodOtherData } from '@/api/dashboard/longTerm.ts'

const dateList = ref([])
const selectInsureCompanyValue = ref('')
const selectTypeValue = ref('')
const selectPlanValue = ref('')

const selectCompanyValue = ref('')

const props = defineProps({
    companyId: {
        type: [String, Number]
    }
})

const list = ref({
    periodPremiumCount: {
        name: '总保费',
        hint: '',
        value: '',
        suffix: '元',
        icon: 'bar1',
        decimal: 2
    },
    rebateAmountCount: {
        name: '返利',
        hint: '',
        value: '',
        suffix: '元',
        icon: 'bar2',
        decimal: 2
    },
    achievementAmount: {
        name: '业绩保费',
        hint: '业绩保费=总保费-返利；返利：每月返利给符合条件的公司',
        value: '',
        suffix: '元',
        icon: 'bar5',
        decimal: 2
    },
})

const getInsureData = () => {
    if (!props.companyId) return
    getPeriodPremiumCount({
        companyId: props.companyId,
        insurCompany: selectInsureCompanyValue.value,
        insuranceMethod: selectTypeValue.value,
        insurCompanyPlanCode: selectPlanValue.value,
        startTime: dateList.value?.length ? dateList.value[0] : '',
        endTime: dateList.value?.length ? dateList.value[1] : ''
    }).then(res => {
        for (const key in list.value) {
            list.value[key].value = res[key]
        }
    })
}

watch(() => props.companyId, (newval) => {
    if (newval) {
        getInsureData()
    }
}, {
    immediate: true
})

</script>
<style lang="scss" scoped>
.h-300 {
    height: 303px;
}
</style>